<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>静态页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
    }

    p {
      color: rgba(255, 255, 255, 0.7);
    }

    .container {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
    }


    .card {
      background-color: rgb(31, 98, 255);
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .card-header h2 {
      font-size: 18px;
      color: #333;
    }

    .card-header .level {
      background-color: #48d98a;
      color: white;
      padding: 5px 10px;
      border-radius: 5px;
    }

    .product-features {
      display: flex;
      justify-content: space-around;
      margin: 20px 0;
    }

    .product-features img {
      width: 40px;
      height: 40px;
    }

    .ranking {
      background-color: rgb(255, 255, 255);
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 20px;
      text-align: center;
    }

    .ranking img {
      width: 100%;
      border-radius: 10px;
    }

    .services {
      background-color: rgb(255, 255, 255);
      padding: 10px;
      text-align: center;
      border-radius: 10px;
      margin-bottom: 20px;
    }

    .services img {
      width: 100px;
      border-radius: 10px;
    }

    .qr-code {
      text-align: center;
    }

    .qr-code img {
      width: 150px;
      height: 150px;
    }

    .title {
      background-color: rgb(245, 245, 245);
    }

    a {
      display: inline-block;
      /* 将 a 标签设为 inline-block 以便使用 margin */
      margin: 0 auto;
      font-size: 16px;
      color: #333;
      padding: 10px 20px;
      background-color: #f0f0f0;
      text-decoration: none;
    }
  </style>
</head>

<body>

  <div class="container">

    <h2>首页</h2>
    <!-- 能效标识卡片 -->
    <div class="card">
      <div class="card-header">
        <h1 style="font-size: 1.7rem;  font-weight: 500;    color: rgb(255, 255, 255);
        margin-bottom: 0.15rem;">中国能效标识</h1>
        <img src="./images/level2.png" alt="" style="width: 80px;">
      </div>
      <p>型号：SYD280R</p>
      <p>备案号：20210605-721200-17736018691686328</p>
      <p>公告时间：2021-06-05</p>
      <p>生产者名称：浙江亿佰达风电股份有限公司 <span style="margin-left: 80px;">查看详情></span> </p>

    </div>

    <h2 class="title">产品特性
    </h2>
    <!-- 产品特性 -->
    <div class="product-features">
      <div><img src="./images/jn.png" alt="节能">
        <div style="margin-left: 5px;">节能</div>
      </div>
      <div><img src="./images/dt.png" alt="低碳">
        <div style="margin-left: 5px;">低碳</div>
      </div>
      <div><img src="./images/ls.png" alt="绿色">
        <div style="margin-left: 5px;">绿色</div>
      </div>
      <div><img src="./images/zn.png" alt="智能">
        <div style="margin-left: 5px;">智能</div>
      </div>
      <div><img src="./images/fw.png" alt="服务">
        <div style="margin-left: 5px;">服务</div>
      </div>
    </div>

    <h2 class="title">领跑榜</h2>
    <!-- 企业标准领跑者 -->
    <div class="ranking">
      <img src="./images/banner01.png" alt="TOP100榜单">
    </div>

    <h2 class="title">办实事</h2>
    <!-- 办实事 -->
    <div class="services">
      <img src="./images/1.png" alt="办实事">
      <span style="margin-bottom: 50px;">我为群众办实事·问需于民</span>
    </div>

    <!-- 二维码 -->
    <div class="qr-code">
      <img src="./images/qrcode.png" alt="二维码">
      <p>公众号服务号</p>
    </div>

    <a>京ICP备14039590号-3</a>
  </div>

</body>

</html>